<template>
  <section>
    <div class="total">
      <!-- 第一行 -->
      <div class="firstRow">
        <!-- 左侧 -->
        <el-card class="firstCircle">
          <div class="title">近7天工单状态统计</div>
          <div id="main1" class="main1Echart"></div>
        </el-card>
        <!-- 右侧 -->
        <el-card class="firstCircle">
          <div class="title">近七天工单数量统计</div>
          <div id="main2" class="main1Echart"></div>
        </el-card>
      </div>
      <!-- 第三行 -->
      <div class="lastRow">
        <!-- 右侧 -->
        <el-card class="lastDiv">
          <div class="title">近7天/12月响应时间趋势图</div>
          <div class="selectDiv">
            <el-radio v-model="radio" :label="7" class="radio">近七天</el-radio>|
            <el-radio v-model="radio" :label="12" class="radio">近十二个月</el-radio>
          </div>
          <div id="main5" class="main5Echart"></div>
        </el-card>
      </div>
    </div>
  </section>
</template>
<script>
// import Vue from 'vue'
import * as echarts from 'echarts'
import { numCount, statusCount, tendency } from './js/api'
// import { now } from 'moment'
export default {
  name: '',
  components: {},
  data () {
    return {
      radio: 7,
      totalData: '',
      circleData: '',
      historyData: '',
      departData: '',
      totalTimes: 0,
      durationData: ''
    }
  },
  created () {},
  mounted () {
    this.getNumber()
    this.getStatus()
    this.getTendency()
  },
  watch: {
    async radio (val) {
      console.log(val)
      this.getTendency()
    }
  },
  methods: {
    // 近7天/12天工单状态统计图 饼图初始化
    getInit1 (data) {
      // 左侧第一个饼状图
      var chartDom1 = document.getElementById('main1')
      var myChart1 = echarts.init(chartDom1)
      var option1 = {}
      option1 = {
        title: {
          // text: 'Referer of a Website',
          // subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        color: ['#FCC857', '#5670C7', '#93CC76', '#37cccc'],
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: '70%',
            center: ['50%', '52%'],
            data: [
              // { value: 1048, name: 'Search Engine' },
              // { value: 735, name: 'Direct' },
              // { value: 580, name: 'Email' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {c} ({d}%)'
                },
                labelLine: { show: true }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      data.forEach(item => {
        option1.series[0].data.push({
          value: item.statusAmount,
          name:
            item.status === 100
              ? '待派单'
              : item.status === 200
                ? '已派单'
                : item.status === 300
                  ? '办结'
                  : item.status === 400
                    ? '已销单'
                    : ''
        })
      })
      option1 && myChart1.setOption(option1)
    },
    // 近7天工单数量统计图 柱状图初始化
    getInit2 (data) {
      // 右侧第一个折线图
      var chartDom2 = document.getElementById('main2')
      var myChart2 = echarts.init(chartDom2)
      var option2 = {}
      option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#5670C7'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: '12%',
          containLabel: true
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#d9d9d9'
              }
            }
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              // 网格线
              lineStyle: {
                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
                color: 'rgba(238,238,238,1)'
              },
              show: true // 隐藏或显示
            }
          }
        ],
        series: [
          {
            name: '工单数',
            type: 'bar',
            barWidth: '35%',
            // data: [10, 52, 200, 334, 390, 330, 220]
            data: []
          }
        ]
      }
      data.forEach(item => {
        option2.xAxis[0].data.push(item.amountsDate)
        option2.series[0].data.push(item.amounts)
      })
      option2 && myChart2.setOption(option2)
    },
    // 近7天/12月响应时间趋势图 折线图初始化
    getInit5 (data) {
      // 右侧第一个折线图
      var chartDom2 = document.getElementById('main5')
      var myChart2 = echarts.init(chartDom2)
      var option2 = {}
      option2 = {
        title: {
          // text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: '15%',
          containLabel: true
        },
        toolbox: {
          // feature: {
          //   saveAsImage: {}
          // }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: '#d9d9d9'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '小时',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            // 网格线
            lineStyle: {
              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
              color: 'rgba(238,238,238,1)'
            },
            show: true // 隐藏或显示
          }
        },
        series: [
          {
            // name: 'Email',
            type: 'line',
            stack: 'Total',
            data: []
          }
        ]
      }
      console.log(data, 990)
      data.forEach(item => {
        option2.xAxis.data.push(item.date)
        option2.series[0].data.push(item.sumHours)
      })
      option2 && myChart2.setOption(option2)
    },
    // 获取工单数量
    async getNumber () {
      let res = await numCount()
      // console.log(res.data)
      if (res.code === 0) {
        this.getInit2(res.data)
      }
    },
    // 获取工单类型
    async getStatus () {
      let res = await statusCount()
      if (res.code === 0) {
        this.getInit1(res.data)
      }
    },
    // 获取响应时间趋势
    async getTendency () {
      let res = await tendency(this.radio)
      console.log(res, 999)
      if (res.code === 0) {
        this.getInit5(res.data)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.total {
  margin: 10px 20px 0;
  min-width: 1300px;
  .firstRow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .firstCircle {
      width: 49%;
    }
    .circleDiv {
      width: 100%;
      height: 250px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .circleLeft {
        width: 25%;
        height: 250px;
        display: flex; //flex布局
        justify-content: center; //使子项目垂直居中;
        flex-direction: column;
        color: #333333;
        font-size: 14px;
        .text {
          height: 40px;
          line-height: 40px;
          .textColor {
            color: #37cccc;
            font-size: 30px;
            font-weight: 550;
            margin-right: 10px;
          }
        }
      }
      .circleRight {
        width: 75%;
        height: 250px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
.title {
  height: 30px;
  line-height: 30px;
  color: #333333;
  font-size: 16px;
  // float: left;
}
.floatDiv {
  float: left;
  height: 32px;
  line-height: 32px;
}
.echartClass {
  width: 50%;
  height: 250px;
}
.rightText {
  width: 50%;
  height: 250px;
  display: flex; //flex布局
  justify-content: center; //使子项目垂直居中;
  flex-direction: column;
  color: #666666;
  font-size: 14px;
  .itemText {
    height: 30px;
    line-height: 30px;
  }
  .littleCircle {
    float: left;
    width: 6px;
    height: 6px;
    background: #37cccc;
    border-radius: 50%;
    margin: 12px 5px 0 0;
  }
  .littleColor {
    background: #fbb738;
  }
  .textColor {
    color: rgba(0, 0, 0, 0.45);
  }
}
/deep/ .el-radio {
  margin: 0;
  .el-radio__input {
    display: none;
  }
  .el-radio__label {
    font-size: 14px;
    padding: 0 5px;
  }
  &.is-checked {
    position: relative;
    margin: 0;
  }
}
.selectDiv {
  // height: 30px;
  text-align: right;
}
.main1Echart {
  width: 100%;
  height: 250px;
}
.textColor1 {
  color: #f3647c !important;
}
.littleColor1 {
  background: #3ba1ff !important;
}
.littleColor2 {
  background: #f3647c !important;
}
.dataPicker {
  height: 32px;
  width: 256px;
}
.floatRight {
  float: right;
  color: #333333;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
}
.clear {
  clear: both;
}
.lastRow {
  height: 480px;
}
.lastDiv {
  width: 100%;
  height: 450px;
}
.main5Echart {
  width: 100%;
  height: 350px;
}
/deep/ .el-form--inline .el-form-item__label {
  width: 110px !important;
}
.bind-class {
  width: 100px;
}
/deep/ .el-date-editor .el-range-separator {
  height: 32px;
}
/deep/ .el-date-editor .el-range__icon {
  height: 32px;
}
/deep/ .el-date-editor .el-range__close-icon {
  height: 32px;
}
</style>
